<script setup lang="ts">
import { PropType, watch, ref } from "vue";
import { ElDialog } from "element-plus";
const
  props = defineProps({
    modelValue: { type: Boolean, default: false },
    label: { type: String, default: "", },
    title: { type: String, default: "", },
    class: { type: String, default: "", },
    style: { type: String, default: "", },
    showButton: { type: Boolean, default: true, },
    dialogOpt: { type: Object as PropType<Partial<CP<typeof ElDialog>>>, default: () => ({}) }
  }),
  emit = defineEmits<{
    (e: "confirm"): void;
    (e: "closed" | "opend"): void;
    (e: "update:modelValue", v: boolean): void;
  }>(),
  show = ref(false);
function click() {
  show.value = false;
  emit("confirm");
}
watch(show, n => {
  emit("update:modelValue", n);
  emit(n ? "opend" : "closed");
});
watch(() => props.modelValue, n => { show.value = n; }, { immediate: true });
</script>
<template>
  <div class="ButtonDialog">
    <el-button @click="show = true" v-bind="$attrs" v-if="showButton" :class="class"
      :style="style">{{ label }}</el-button>
    <ElDialog v-model="show" append-to-body destroy-on-close :title="title" v-bind="{ ...dialogOpt }">
      <template v-for="(_value, key) in $slots" #[key]="slotProps" :key="key">
        <slot :name="key" v-bind="slotProps"></slot>
      </template>
      <template v-if="!$slots.footer" #footer>
        <el-button type="primary" @click="click">确定</el-button>
      </template>
    </ElDialog>
  </div>
</template>
<style lang="scss" scoped>
.ButtonDialog {
  position: relative;
}
</style>